<script setup lang="ts">
import { alipay } from '@/utils';
import type { PaymentProps } from '../types';

const props = defineProps<PaymentProps>();

const onAlipay = () => {
  alipay(props.payData.title, props.payData.desc, 0.01);
};
</script>

<template>
  <div class="flex h-[80vh] flex-col py-2">
    <h2 class="mb-2 px-1 text-xl font-bold text-zinc-900 dark:text-zinc-200">
      选择支付方式
    </h2>
    <!-- 支付宝 -->
    <div
      class="flex items-center border-b border-b-zinc-200 px-2 py-2 active:bg-zinc-200 dark:border-b-zinc-600 dark:active:bg-zinc-900"
      @click="onAlipay"
    >
      <img class="h-4 w-4" src="@/assets/images/alipay.png" alt="" />
      <p class="ml-1 text-xl text-zinc-800 dark:text-zinc-200">支付宝</p>
    </div>
  </div>
</template>
